<template>
  <view class="container">
    <view class="vehicle-info-card">
      <!--顶部 -->
      <view class="vehicle-details">
        <view class="gray-background">
          <view class="license-plate">
            <text class="plate-number">马云飞</text>
          </view>
          <view class="details">
            <view class="detail-item">身份证：421087198208241316</view>
          </view>
<!--          添加下划线-->
<!--          <view class="details">-->
<!--            <view class="detail-item" style="text-decoration: underline;"></view>-->
<!--          </view>-->
          <view class="details">
            <view class="detail-item">创建日期：2024-06-24</view>
            <view class="detail-item">更新日期：2024-06-24</view>
          </view>
        </view>
      </view>

      <!-- Tabs Section -->
      <up-tabs
        class="up-tabs-content"
        :list="carsDataDetails"
        @click="onTabClick"
        :lineWidth="lineWidth"
        lineColor="#2877FF"
        :activeStyle="activeTabStyle"
        :inactiveStyle="inactiveTabStyle"
        itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"
      />

      <!-- Tab Content -->
      <view v-if="activeTab === 'personInfo'" class="tab-content">
        <view
          class="info-row"
          v-for="(value, label) in personInfo"
          :key="label"
        >
          <text class="vehiclelabel">{{ label }}</text>
          <text class="vehiclevalue">{{ value }}</text>
        </view>
      </view>
      <view v-if="activeTab === 'certInfo'" class="tab-content">
        <view
                class="info-row"
                v-for="(value, label) in certInfo"
                :key="label"
        >
          <text class="vehiclelabel">{{ label }}</text>
          <text class="vehiclevalue">{{ value }}</text>
        </view>
      </view>
      <view v-if="activeTab === 'businessInfo'" class="tab-content">
        <text>备案信息</text>
      </view>
      <view v-if="activeTab === 'annualReview'" class="tab-content">
        <text>诚信考核</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      carsDataDetails: [
        { name: "基本信息", id: "personInfo" },
        { name: "证件信息", id: "certInfo" },
        { name: "备案信息", id: "businessInfo" },
        { name: "诚信考核", id: "annualReview" },
      ],
      activeTab: "personInfo", // 默认显示人员信息
      lineColor: "#2877FF", // Tab 下划线颜色
      personInfo: {
        省份区域: "湖北省",
        证件类型: "身份证",
        证件号码: "421087198208241316",
        民族: "汉",
        联系电话: "15236895691",
        联系地址: "湖北省荆州市",
        文化程度: "本科",
        技术职称: "高级",
        人员状况: "健康",
        户籍地: "421002",
      },
      certInfo: {
        从业资格类别: "从业资格类别",
        从业资格证号: "身份证",
        从业资格初领时间: "20241017",
        从业资格发证日期: "20241017",
        证件有效期至: "20420824",
        发证机构名称: "荆州市交通运输局",
        证件状态: "有效",
        证照介质类型: "高级",
        IC卡道路运输证件卡号: "健康",
      },
    };
  },
  mounted() {},
  computed: {
    lineWidth() {
      return this.calculateTextWidth(this.activeTab);
    },
    activeTabStyle() {
      return {
        color: "#2877FF",
        fontWeight: "bold",
        transform: "scale(1.05)",
      };
    },
    inactiveTabStyle() {
      return {
        color: "#606266",
        transform: "scale(1)",
      };
    },
  },
  methods: {
    calculateTextWidth(text) {
      const canvas = document.createElement("canvas");
      const context = canvas.getContext("2d");
      context.font = "16px Arial";
      return context.measureText(text).width;
    },
    onTabClick(tab) {
      console.log("Tab clicked:", tab);
      if (tab && tab.index >= 0 && tab.index < this.carsDataDetails.length) {
        this.activeTab = this.carsDataDetails[tab.index].id;
      } else {
        console.error("Invalid tab index:", tab);
      }
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  padding: 10px;
  background: #f3f6fa;
  height: 100vh;
  .vehicle-info-card {
    background-color: white;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
}
.vehicle-details {
  border-radius: 8px;
  margin-bottom: 20px;
  .vehicle-title {
    font-size: 14px; /* Slightly decreased font size */
    margin-bottom: 10px;
    color: #333333;
    font-weight: 300;
  }
  .gray-background {
    background-color: #fafafb;
    padding: 10px;
    border-radius: 8px;
    .license-plate {
      background-color: #ffbd02;
      color: black;
      padding: 2px;
      border-radius: 4px;
      display: inline-block;
      font-weight: bold;
      margin-bottom: 10px;
      width: 74px;
      height: 19px;
      .plate-number {
        font-size: 18px;
        font-weight: 400;
        color: #606266;
      }
    }
    .details {
      display: flex;
      flex-wrap: wrap;
      color: #606266;
      font-size: 12px;
      color: #79829c;
      .detail-item {
        flex: 1 1 50%;
        margin-bottom: 10px;
      }
    }
  }
}

.tab-content {
  .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    .vehiclelabel {
      color: #79829c;
    }

    .vehiclevalue {
      color: #0d1444;
    }
  }
}
//tab切换栏样式
.up-tabs-content {
  margin-bottom: 20px;
}
</style>
